Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
sagemathinc
GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/sso/[id].tsx
1543 views
1
/*

2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { r_human_list } from "@cocalc/frontend/components/r_human_list";

7
import { Button, Layout, Typography } from "antd";

8
import Footer from "components/landing/footer";

9
import Head from "components/landing/head";

10
import Header from "components/landing/header";

11
import Main from "components/landing/main";

12
import SanitizedMarkdown from "components/misc/sanitized-markdown";

13
import { ssoNav } from "components/sso";

14
import basePath from "lib/base-path";

15
import { Customize, CustomizeType } from "lib/customize";

16
import { getOneSSO } from "lib/sso/sso";

17
import withCustomize from "lib/with-customize";

18
import Link from "next/link";

19
import { join } from "path";

20
import { SSO_SUBTITLE } from ".";

21


22
import type { JSX } from "react";

23


24
const { Paragraph, Text } = Typography;

25


26
interface Props {

27
  customize: CustomizeType;

28
  id: string;

29
  descr?: string;

30
  display: string;

31
  icon?: string;

32
  domains: string[];

33
}

34


35
export default function Signup(props: Props) {

36
  const { id, descr, display, icon, domains, customize } = props;

37


38
  function renderDescr() {

39
    const fallback = `If you have an account at this provider,

40
    you can signup here to get access to ${customize.siteName}.`;

41
    const md = `## ${display}\n\n${descr ?? fallback}`;

42
    return <SanitizedMarkdown value={md} />;

43
  }

44


45
  function renderIcon() {

46
    if (icon == null) return null;

47
    return (

48
      <div style={{ float: "right" }}>

49
        <img src={icon} width={100} height={100} />

50
      </div>

51
    );

52
  }

53


54
  function renderExclusiveDomains() {

55
    if (domains.length === 0) return null;

56
    return (

57
      <Paragraph>

58
        This is required for email addresses at{" "}

59
        {r_human_list(

60
          (domains ?? []).map((d) => (

61
            <Text code key={d}>

62
              {d}

63
            </Text>

64
          ))

65
        )}

66
      </Paragraph>

67
    );

68
  }

69


70
  function renderButton() {

71
    const href = join(basePath, "auth", id);

72
    return (

73
      <Button

74
        href={href}

75
        type="primary"

76
        size="large"

77
        style={{ marginTop: "50px" }}

78
      >

79
        Sign up using {display}

80
      </Button>

81
    );

82
  }

83


84
  function main() {

85
    return (

86
      <>

87
        {renderIcon()}

88
        {renderDescr()}

89
        {renderExclusiveDomains()}

90
        {renderButton()}

91
      </>

92
    );

93
  }

94


95
  function nav(): JSX.Element[] {

96
    return [...ssoNav(), <Link href={`/sso/{id}`}>{display}</Link>];

97
  }

98


99
  return (

100
    <Customize value={customize}>

101
      <Head title={`${SSO_SUBTITLE} – ${display}`} />

102
      <Layout style={{ background: "white" }}>

103
        <Header />

104
        <Main nav={nav()}>{main()}</Main>

105
        <Footer />

106
      </Layout>

107
    </Customize>

108
  );

109
}

110


111
export async function getServerSideProps(context) {

112
  const { id } = context.params;

113
  const info = await getOneSSO(id);

114
  return await withCustomize({ context, props: { ...info } });

115
}

116


117